<template>
    <div class="extract">
        <el-progress class="state" v-show="download" :percentage="percent" :stroke-width="3" :text-inside="true" />
        <el-dialog v-if="dialogVisible" v-model="dialogVisible" :show-close="false" :close-on-click-modal="false"
            title="请输入密码" width="30%" :before-close="handleClose">
            <div class="flex aic">
                <p>请输入提取码：</p><el-input v-model="password" @keyup.enter="enter" placeholder="Please input" style="width: 80%;" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
                    <el-button type="primary" @click="sure">
                        Confirm
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-table v-else :data="tableData" style="width: 100%">
            <el-table-column prop="Title" label="名称">
                <template v-slot="title">
                    <div class="flex aic">
                        <img v-if="title.row.file.file_or_folder_name.split('.')[1] == 'jpg' || title.row.file.file_or_folder_name.split('.')[1] == 'png'"
                            class="titleImg" :src="title.row.file.file_path" alt="">
                        <i v-else-if="title.row.file.file_or_folder_name.split('.')[1] == 'pdf'"
                            class="ml-5 mr-5 iconfont icon-pdf" style="font-size: 22px;"></i>
                        <i v-else-if="title.row.file.file_or_folder_name.split('.')[1] == 'mp4'"
                            class="ml-5 mr-5 iconfont icon-shipin" style="font-size: 23px;"></i>
                        <i v-else-if="title.row.file.file_or_folder_name.split('.')[1] == 'txt'"
                            class="ml-5 mr-5 iconfont icon-wenben" style="font-size: 24px;"></i>
                        <i v-else class="ml-5 iconfont icon-qitawenjian" style="font-size: 27px;"></i>
                        <span class="ml-20">{{ title.row.file.file_or_folder_name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="file.size" label="大小" />
            <el-table-column prop="expiration_time" label="到期时间" />
            <el-table-column label="下载">
                <template v-slot="operate">
                    <div>
                        <i @click="down(operate.row)" class="iconfont icon-xiazai f18 cp"></i>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as $axios from '../../api/index'
import axios from 'axios';
import { ElMessage, ElNotification } from 'element-plus'
import { useRoute } from "vue-router";
import { useDemoStore } from '../../pinia/index'
const route = useRoute();
const store = useDemoStore()

const dialogVisible = ref(false)
const password = ref('') //密码输入框

// 分享内容数据
const tableData = ref([])

// 获取分享内容
const getShare = () => {
    const data = {
        share_id: route.query.share_id
    }
    $axios.$fileShare_info(data).then(res => {
        if (res.data.is_pwd == 'YES') {
            dialogVisible.value = true
        } else {
            res.data.file.size = (res.data.file.size / 1024 / 1000).toFixed(2) + 'M'
            tableData.value.push(res.data)
        }
        console.log(res.data)
    })
}

// 回车触发
const enter = ()=>{
    sure()
}
// 密码获取分享内容
const sure = () => {
    const data = {
        share_id: route.query.share_id,
        pwd: password.value
    }
    $axios.$fileShare_pwd(data).then(res => {
        if (res.Status == 0) {
            res.data.file.size = (res.data.file.size / 1024 / 1000).toFixed(2) + 'M'
            tableData.value.push(res.data)
            dialogVisible.value = false
        }
        console.log(res)
    })
}

// 下载文件
const percent = ref('')
const download = ref(false)
const down = (value) => {
    console.log(value)
    ElNotification({
        // title: 'Success',
        message: 'Download Start',
        type: 'success',
        duration: 2000
    })
    const id = value.file_id
    const name = value.file.file_or_folder_name
    const data = {
        file: id,
        type: value.type
    }
    axios({
        url: 'http://d-api.files99.com/qmapi/file/down',
        method: 'post',
        data: data,
        onDownloadProgress: (progressEvent) => { //获取下载进度
            download.value = true
            let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
            percent.value = process
            process == 100 ? download.value = false : ''
        }
    }).then(res => {
        console.log(res)
        if (res.data.Status == 0) {
            ElMessage({
                message: 'Download successful',
                type: 'success',
            })
            var base64 = res.data.data.base.toString(); // imgSrc 就是base64哈
            var byteCharacters = atob(
                base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
            );
            var byteNumbers = new Array(byteCharacters.length);
            for (var i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            var blob = new Blob([byteArray], {
                type: undefined,
            });
            var aLink = document.createElement("a");
            aLink.download = name; //这里写保存时的图片名称
            aLink.href = URL.createObjectURL(blob);
            aLink.click();
        } else {
            ElMessage({
                message: 'Download failed',
                type: 'warning',
            })
        }
    })
}

onMounted(() => {
    getShare()
})
</script>

<style lang="less" scoped>
.extract {
    .titleImg {
        width: 100px;
    }

    .icon-xiazai {
        font-size: 23px;
    }

    // 弹窗进度条
    .state {
        position: fixed;
        top: 0px;
        // bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
    }

}
</style>